import React, { useState, useEffect } from "react";

import "./HomeCenter.css";
import tu1 from "../../../assets/image/非机动车未带头盔识别系统_nor.png";
import tu2 from "../../../assets/image/非机动车未带头盔识别系统_hov.png";
import tu3 from "../../../assets/image/重点车辆监管系统_nor.png";
import tu4 from "../../../assets/image/重点车辆监管系统_hov.png";
import tu5 from "../../../assets/image/支队平台系统本地化应用_nor.png";
import tu6 from "../../../assets/image/支队平台系统本地化应用_hov.png";
import tu7 from "../../../assets/image/可视化作战平台_nor.png";
import tu8 from "../../../assets/image/可视化作战平台_hov.png";
import tu9 from "../../../assets/image/停车卡口接入系统_nor.png";
import tu10 from "../../../assets/image/停车卡口接入系统_hov.png";
import tu11 from "../../../assets/image/交通态势监控系统_nor.png";
import tu12 from "../../../assets/image/交通态势监控系统_hov.png";

const YourComponentName = () => {
  const [menuList, setMenuList] = useState([
    {
      url: "",
      img: tu1,
      img2: tu2,
      title: "重点车辆监管系统",
    },
    {
      url: "",
      img: tu3,
      img2: tu4,
      title: "未带头盔识别系统",
    },
    {
      url: "",
      img: tu5,
      img2: tu6,
      title: "交通安全画像系统",
    },
    {
      url: "",
      img: tu7,
      img2: tu8,
      title: "交通态势监控系统",
    },
    {
      url: "",
      img: tu9,
      img2: tu10,
      title: "可视化作战平台",
    },
    {
      url: "",
      img: tu11,
      img2: tu12,
      title: "重点车辆监管系统",
    },
  ]);

  const [isFlag, setIsFlag] = useState(false);
  const [active, setActive] = useState(9);

  useEffect(() => {
    const items = document.querySelectorAll(".ball");
    items.forEach((item, i) => {
      item.style.animationDelay = `${-5 - 3.3 * i}s, ${-3.3 * i}s, ${
        -3.3 * i
      }s`;
    });
  }, []);

  const mousemove = (i) => {
    setIsFlag(true);
    setActive(i);
  };

  const mouseleave = () => {
    setIsFlag(false);
    setActive(8);
  };

  const tabFun = (v) => {
    alert(`您点击了${v.title}`);
  };

  return (
    <div className="center-container">
      <div className="container">
        <div className="borther">
          {menuList.map((item, index) => (
            <div
              key={index}
              className={isFlag ? "active_item ball" : "ball"}
              onClick={() => tabFun(item)}
              onMouseEnter={() => mousemove(index)}
              onMouseLeave={mouseleave}
            >
              <img
                style={{ width: "200px" }}
                src={active === index ? item.img2 : item.img}
                alt=""
                className="img-item"
              />
              <p style={{ fontSize: "20px", color: "white" }}>{item.title}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default YourComponentName;
